<!--
  租约信息确认
-->
<template lang="html">
  <div class="leaseInfoConfirm-wrap">
    <section class="contract-info">
      <p>租约信息确认</p>
      <group>
        <x-input
          :show-clear="false"
          title="姓名"
          v-model="name"
          disabled
          text-align="right"
        ></x-input>
        <x-input
          :show-clear="false"
          title="证件号"
          v-model="idCard"
          disabled
          text-align="right"
        ></x-input>
        <x-input
          :show-clear="false"
          title="物业地址"
          v-model="address"
          disabled
          text-align="right"
        ></x-input>
        <x-input
          :show-clear="false"
          title="合同日期"
          v-model="contractDate"
          disabled
          text-align="right"
        ></x-input>
      </group>
    </section>
    <section>
      <group>
        <x-input
          :show-clear="false"
          title="租金金额"
          v-model="rentalPrice"
          disabled
          text-align="right"
        ></x-input>
        <x-input
          :show-clear="false"
          title="押金金额"
          v-model="betPrice"
          disabled
          text-align="right"
        ></x-input>
        <x-input
          :show-clear="false"
          title="付款方式"
          v-model="payWay"
          disabled
          text-align="right"
        ></x-input>
      </group>
    </section>
    <section>
      <group>
        <x-input
          :show-clear="false"
          title="合计付款"
          v-model="summation"
          disabled
          text-align="right"
        ></x-input>
      </group>
    </section>
    <div class="generate-contract">
      <x-button type="primary" @click.native="generateContract">生成合同</x-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 姓名
      name: '',
      // 证件号
      idCard: '',
      // 物业地址
      address: '',
      // 合同日期
      contractDate: '',
      // 租金
      rentalPrice: '',
      // 押金
      betPrice: '',
      // 付款方式
      payWay: '',
      // 总计
      summation: '',
      // 付款方式
      payments: {
        1: '月付',
        3: '季度付',
        6: '半年付'
      }
    }
  },
  created () {
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
    let leaseInfo = JSON.parse(window.localStorage.getItem('leaseInfo') || '{}')
    let houseInfo = JSON.parse(window.localStorage.getItem('signHouseInfo') || '{}')
    this.name = userInfo.trueName // 租客姓名
    this.idCard = userInfo.idCard // 租客身份证号码
    // 只通过房源数据获取押金
    let { betNum, rentalPrice, address } = houseInfo
    this.rentalPrice = `￥${rentalPrice}` // 租金
    this.betPrice = betNum * rentalPrice // 押金
    this.address = address // 物业地址
    this.payWay = this.payments[leaseInfo.payment]
    this.contractDate = `${leaseInfo.startDate}到${leaseInfo.endDate}`
    this.summation = +rentalPrice + this.betPrice // 总计
    // localStorage leaseInfo 添加总计金额
    leaseInfo.summation = this.summation
    window.localStorage.setItem('leaseInfo', JSON.stringify(leaseInfo))
  },
  methods: {
    generateContract () {
      this.$router.push({ path: '/generateContract' })
    }
  }
}
</script>

<style lang="less">
  .leaseInfoConfirm-wrap{
    padding-bottom: 6px;
    background-color: #f4f4f4;
    section{
      padding: 0 15px;
      margin-bottom: 6px;
      background-color: #fff;
      &:nth-last-of-type(1){
        margin-bottom: 0;
      }
    }
    .weui-cells{
      &::before, &::after{
        display: none;
      }
      &.vux-no-group-title{
        margin-top: 0;
      }
      .weui-cell{
        padding: 10px 0;
      }
      .weui-label, .weui-input{
        font-size: 14px;
      }
      .weui-input:disabled{
        -webkit-text-fill-color: #000;
        -webkit-opacity: 1;
        color: #000;
      }
    }
    .contract-info{
      padding-top: 10px;
      p{
        line-height: 30px;
        font-size: 14px;
      }
      .weui-label, .weui-input{
        color: #666;
      }
      .weui-input:disabled{
        -webkit-text-fill-color: #666;
        -webkit-opacity: 1;
        color: #666;
      }
    }
    .generate-contract{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
</style>
